import React, { Component } from 'react'
import axios from 'axios';
import { LeftOutline } from 'antd-mobile-icons'
import './index.scss';
import { Link } from 'react-router-dom';
import abc1 from '../../img/gift.png'
import abc2 from '../../img/two-member.png'
import abc3 from '../../img/new_shopCart1.png'
export default class ListCom extends Component {
    constructor() {
        super();
        this.state = {
            list: [],
            end: false
        };
        //自由变量
        this.type = true;
        this.page = 1;////当前页的页码
    }
    componentDidMount() {
        console.log(this.props);
        let searchKey = this.props.match.params.searchstr;
        this.moreData();
        //触底加载
        this.onScroll();
    }
    //数据假设只有10页,11页
    onScroll = () => {
        //绑定滚动事件
        window.onscroll = () => {
            //获取滚动距离
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //窗口的高度
            let windowHeight = document.documentElement.clientHeight;
            //滚动的高度
            let scrollHeight = document.body.scrollHeight;
            // console.log(`触底,scrollTop:${scrollTop},windowHeight:${windowHeight},scrollHeight:${scrollHeight}`);
            if (scrollHeight - scrollTop <= windowHeight) {
                console.log("触底了");
                if (this.type) {
                    this.page++;
                    this.moreData();
                }
                this.type = false;
            }
        }
    }
    moreData = () => {
        if (!this.state.end) {
            let searchKey = this.props.match.params.searchstr;
            axios.post('https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/commoditySearch', { "memberKey": "", "searchKey": searchKey, "isWholeSale": 0, "channelId": "C06022632001", "page": this.page }).then(res => {
                console.log(res);
                let data = res.data.data.templateList;
                if (data.length !== 0) {
                    this.setState({
                        list: [...this.state.list, ...data]
                    });
                    this.type = true;
                } else {
                    this.setState({
                        end: true
                    })
                }
            })
        }
    }

    //页面卸载时需要将 滚动事件的绑定清除

    componentWillUnmount() {
        window.onscroll = undefined;
    }


    goBack = () => {
        this.props.history.go(-1);
    }

    render() {
        let { list, end } = this.state;
        return (
            <div className="list_con">
                <div className="list_title"> <LeftOutline onClick={this.goBack} /> 列表页面</div>
                <ul>
                    {
                        list.map(i => <div className='item' key={i.ptKey}>
                            <Link to={"/item/" + i.ptKey}>
                                <img src={i.listImages} alt={i.name} />
                                <div className="tuijian_text">
                                    <img src={abc1} alt={2} className="tuijiantu1" />
                                    <span>{i.name}</span>
                                    <span>{i.displayName}</span>
                                    <div className="tuijian_neirong">
                                        <div>
                                            <span>￥{i.retailPrice}</span>
                                            <span>
                                                ￥{i.supplyPrice}
                                                <img src={abc2} alt={2} />
                                            </span>
                                            <img src={abc3} alt={2} className="tuijiantu2" />
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        </div>)
                    }
                </ul>
                {
                    end ? <div>您的数据都加载完了，请不要再拉了...</div> : ""
                }

            </div>
        )
    }
}
